Files that changed from the base of the PR and between f265dd9 and 34c8971.

• upcoming-release-notes/3734.md is excluded by !**/*.md

• packages/desktop-client/src/components/mobile/accounts/Accounts.jsx (4 hunks)

packages/desktop-client/src/components/mobile/accounts/Accounts.jsx (3)

190-194: LGTM! Clear implementation of combined budgeted accounts view.

The implementation provides a clear entry point to view all budgeted account transactions, which directly addresses the feature request from issue #2333.

---

224-227: LGTM! Consistent implementation for off-budget accounts view.

The implementation maintains consistency with the budgeted accounts section while providing clear navigation to combined off-budget transactions.

---

Line range hint 23-227: Verify navigation paths for combined account views.

The implementation looks solid overall and addresses the requirements from issue #2333. Let's verify the navigation paths to ensure consistency.

✅ Verification successful

Navigation implementation for combined account views is consistent

The verification shows that:

• The navigation pattern in Accounts.jsx aligns with existing account navigation patterns in other components
• Route handling for budgeted/offbudget accounts is properly defined in the sidebar component
• The AccountHeader component is consistently used across both mobile and desktop account views
• The implementation maintains compatibility with existing account-related components and test files

The changes successfully implement the combined account view navigation without introducing inconsistencies or regressions in the navigation paths.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify navigation paths and route handlers for combined account views

# Test: Check for any other components that might need similar navigation updates
rg -l "navigate\(\'/accounts/" --type jsx

# Test: Verify consistent route handling across the application
rg -l "\/accounts\/(budgeted|offbudget)" --type jsx

Length of output: 298

---

Script:

#!/bin/bash
# Let's fix the regex syntax and try again

# Check for navigation patterns to accounts
rg -l "navigate\('/accounts" --type jsx

# Check for route handlers with combined account paths
rg -l "/accounts/(budgeted|offbudget)" --type jsx

# Look for other potential route definitions
rg -l "path.*accounts" --type jsx

# Check for any AccountHeader usage
rg -l "AccountHeader" --type jsx

Length of output: 277

---

Script:

#!/bin/bash
# Search without file type restriction since jsx type isn't recognized

# Check for navigation patterns to accounts
rg -l "navigate\\('/accounts"

# Check for route handlers with combined account paths
rg -l "/accounts/(budgeted|offbudget)"

# Look for other potential route definitions
rg -l "path.*accounts"

# Check for any AccountHeader usage
rg -l "AccountHeader"

# Find all potential account-related components
fd -e jsx -e js | grep -i "account"

Length of output: 1595

23-62: Good implementation of interactive headers with visual indicators.

The conversion to Button component and addition of chevron icon successfully implements the reviewer's suggestions and improves mobile UX.

However, here are some suggested improvements:

1. Add ARIA label for better accessibility:

 <Button
   variant="bare"
+  aria-label={`View ${name} transactions`}
   onPress={() => navigate(`/accounts/${id}`)}
   style={{

2. Consider adding hover/active states for better interaction feedback:

 <Button
   variant="bare"
   onPress={() => navigate(`/accounts/${id}`)}
   style={{
     flex: 1,
     flexDirection: 'row',
     marginTop: 10,
     padding: 0,
     color: theme.pageTextLight,
     width: '100%',
+    ':hover': {
+      backgroundColor: theme.hover
+    },
+    ':active': {
+      backgroundColor: theme.buttonBackgroundActive
+    },
     ...style,
   }}
 >

199-203: Current implementation provides a good foundation for mobile account navigation.

The addition of combined views for budgeted and off-budget accounts improves mobile navigation. However, to fully address issue #2333, consider these future enhancements:

1. Add an "All Accounts" view as discussed in the PR comments
2. Consider adding a loading state for the navigation transitions

For the "All Accounts" view, you could add it as:

<AccountHeader
  id="all"
  name="All Accounts"
  amount={getOnBudgetBalance() + getOffBudgetBalance()}
  style={{ marginBottom: 20 }}
/>

Also applies to: 220-224

Files that changed from the base of the PR and between 34c8971 and 6869ef0.

• upcoming-release-notes/3734.md is excluded by !**/*.md

• packages/desktop-client/src/components/mobile/accounts/Accounts.jsx (4 hunks)

27-42: Consider increasing touch target size for better mobile accessibility.

The current padding (7px top/bottom) might be insufficient for comfortable touch interaction on mobile devices. Apple's Human Interface Guidelines recommend a minimum touch target size of 44x44 points.

 <Button
   variant="bare"
   aria-label={`View ${name} transactions`}
   onPress={() => navigate(`/accounts/${id}`)}
   style={{
     flex: 1,
     flexDirection: 'row',
-    paddingTop: 7,
-    paddingBottom: 7,
+    paddingTop: 12,
+    paddingBottom: 12,
     paddingLeft: 0,
     paddingRight: 0,
     color: theme.pageTextLight,
     width: '100%',
     ...style,
   }}
 >

Files that changed from the base of the PR and between 6869ef0 and 0741271.

• packages/desktop-client/src/components/mobile/accounts/Accounts.jsx (4 hunks)